<template>
  <div class="comp-range-day">
    <a-date-picker
	    format="YYYY-MM-DD"
      :size="size"
	    :value="value[0]"
	    :open="openStart"
      :clearable="true"
      :placeholder="placeholder[0]"
      @change="changeStart"
	    @openChange="openChangeStart"
	    @panelChange="panelChangeStart"
	  />
    <span class="spliter">-</span>
    <a-date-picker
      :size="size"
	    format="YYYY-MM-DD"
      :clearable="true"
	    :value="value[1]"
	    :open="openEnd"
      :placeholder="placeholder[1]"
      :disabled-date="disabledDate"
      @change="changeEnd"
	    @openChange="openChangeEnd"
	    @panelChange="panelChangeEnd"
	  />
  </div>
</template>
<script lang="ts">
import KV from '@/components/form/kv'
import { isString } from 'lodash'
import Vue from 'vue'
import moment from 'moment'


export default Vue.extend({
  props: {
    size: {
      type: String,
      default(){
        return 'small'
      }
    },
    value:{
      type: Array,
      default(){
        return ['', '']
      }
    },
    placeholder:{
      type: Array,
      default(){
        return ['开始时间', '结束时间']
      }
    }
  },
  data(){
    const defaultValue:KV = {
      openStart: false,
      openEnd: false
    }
    return defaultValue
  },
  computed: {
   
  },
  methods: {
    disabledDate(current:any){
      if(this.value[0]){
        return moment(new Date(this.value[0] as string) ).subtract('day', 1) > current
      }
      return false
    },
    changeStart(value:any){
      this.panelChangeStart(value)
    },
    changeEnd(value:any){
      this.panelChangeEnd(value)
    },
    openChangeStart(status:any) {
      if (status) {
        this.openStart = true
      } else {
        this.openStart = false
      }
    },
    panelChangeStart(value:any){
      const valueNew = [ value || '' ,this.value[1] || '']
      let start =  isString(valueNew[0])?  valueNew[0] : (valueNew[0] as KV).format('YYYY-MM-DD')
      let end = isString(valueNew[1])?  valueNew[1] : (valueNew[1] as KV).format('YYYY-MM-DD')
  
      if(start && end ){
        const startNumber = new Date(start).getTime()
        const endNumber = new Date(end).getTime()
        if (startNumber > endNumber) {
          this.$message.error('开始时间必须小于结束时间')
          start = value.startOf('day').subtract('day', Math.ceil((startNumber - endNumber + 1) / (24 * 60 * 60 * 1000))).format('YYYY-MM-DD')
        }
      }
      if(!end){
        end = start
      }
      this.$emit('input', [ start, end ])
      this.openStart = false
    },
    openChangeEnd(status:any) {
      if (status) {
        this.openEnd = true
      } else {
        this.openEnd = false
      }
    },
    panelChangeEnd(value:any){
      const valueNew = [ this.value[0] || '',value || '']
      let start =  isString(valueNew[0])?  valueNew[0] : (valueNew[0] as KV).format('YYYY-MM-DD')
      let end = isString(valueNew[1])?  valueNew[1] : (valueNew[1] as KV).format('YYYY-MM-DD')

      if(start && end ){
        const startNumber = new Date(start).getTime()
        const endNumber = new Date(end).getTime()
        if (startNumber > endNumber) {
          // this.$message.error('开始时间必须小于结束时间')
          end = value.startOf('day').subtract('day', -1 * Math.ceil((startNumber - endNumber + 1) / (24 * 60 * 60 * 1000))).format('YYYY-MM-DD')
        }
      }
      if(!start){
        start = end
      }
      this.$emit('input', [ start, end ])
      this.openEnd = false
    }
  }
})
</script>
<style lang="less" scoped>
.comp-range-day {
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  height: auto;
  width: auto;
}

.spliter {
  align-content: center;
  align-items: center;
  color: rgba(0, 0, 0, 0.25);
  display: flex;
  height: 100%;
  padding: 0 8px;
}
</style>